<template>
  <div class="app-container">
    <div class="app-title">查询条件</div>
    <div class="filter-container clearfix">
      <div class="searchItem">
        <label for="">用户ID:</label>
        <el-input
          v-model="searchForm.userId"
          placeholder="请输入用户ID"
          class="search-item"
        />
      </div>
      <div class="searchItem">
        <label for="">修理厂名称:</label>
        <el-input
          v-model="searchForm.repairName"
          placeholder="请输入修理厂名称"
          class="search-item"
        />
      </div>
      <div class="searchItem">
        <label for="">申请时间:</label>
        <el-date-picker
          v-model="dateTime"
          :range-separator="null"
          start-placeholder="申请时间"
          value-format="yyyy-MM-dd"
          class="search-item date-range-item"
          type="daterange"
        />
      </div>
      <div class="searchItem">
        <el-button
          v-hasPermission="['feedList:search']"
          class="searchItembtn"
          type="primary"
          @click="search"
        >
          {{ $t("common.search") }}
        </el-button>
        <el-button class="searchItembtn" type="success" @click="reset">
          {{ $t("table.reset") }}
        </el-button>
        <el-button class="searchItembtn" type="success" @click="out">
          导出Excel
        </el-button>
      </div>
    </div>
    <div class="app-title">维修网点申请表</div>

    <el-table
      ref="table"
      :key="tableKey"
      v-loading="loading"
      :data="list"
      border
      fit
      style="width: 100%"
      @sort-change="sortChange"
    >
      <el-table-column
        label="编号"
        prop="recruitSalesId"
        :show-overflow-tooltip="true"
        align="center"
        min-width="120px"
        type="index"
      >
        <!-- <template slot-scope="scope">
          <span>{{ scope.row.username }}</span>
        </template> -->
      </el-table-column>
      <el-table-column
        label="申请时间"
        :show-overflow-tooltip="true"
        align="center"
        min-width="150px"
      >
        <template slot-scope="scope">
          <span>{{ scope.row.applyDate }}</span>
        </template>
      </el-table-column>
      <el-table-column
        label="用户ID"
        :show-overflow-tooltip="true"
        align="center"
        min-width="150px"
      >
        <template slot-scope="scope">
          <span>{{ scope.row.userId }}</span>
        </template>
      </el-table-column>
      <el-table-column
        label="修理厂名称"
        :show-overflow-tooltip="true"
        align="center"
        min-width="150px"
      >
        <template slot-scope="scope">
          <span>{{ scope.row.repairName }}</span>
        </template>
      </el-table-column>
      <el-table-column
        label="业务对接人"
        :show-overflow-tooltip="true"
        align="center"
        min-width="150px"
      >
        <template slot-scope="scope">
          <span>{{ scope.row.repairBusinessUser }}</span>
        </template>
      </el-table-column>
      <el-table-column
        label="对接人联系电话"
        :show-overflow-tooltip="true"
        align="center"
        min-width="150px"
      >
        <template slot-scope="scope">
          <span>{{ scope.row.repairBusinessMobile }}</span>
        </template>
      </el-table-column>
      <el-table-column
        label="详细地址"
        :show-overflow-tooltip="true"
        align="center"
        min-width="150px"
      >
        <template slot-scope="scope">
          <span>{{ scope.row.address }}</span>
        </template>
      </el-table-column>
      <el-table-column
        label="是否能开增值税票"
        :show-overflow-tooltip="true"
        align="center"
        min-width="150px"
      >
        <template slot-scope="scope">
          <span>{{ scope.row.invoiceType }}</span>
        </template>
      </el-table-column>
      <el-table-column
        label="自有或合作救援"
        :show-overflow-tooltip="true"
        align="center"
        min-width="150px"
      >
        <template slot-scope="scope">
          <span>{{ ["有", "无"][scope.row.isRescue] }}</span>
        </template>
      </el-table-column>
      <!-- <el-table-column
        label="延保送保养"
        :show-overflow-tooltip="true"
        align="center"
        min-width="150px"
      >
        <template slot-scope="scope">
          <span>{{ ["有", "无"][scope.row.isMaintenance] }}</span>
        </template>
      </el-table-column> -->
      <el-table-column
        label="营业执照"
        :show-overflow-tooltip="true"
        align="center"
        min-width="150px"
      >
        <template slot-scope="scope">
          <a :href="scope.row.businessLicenseUrl">{{
            scope.row.businessLicenseUrl
          }}</a>
        </template>
      </el-table-column>
      <el-table-column
        label="门头照"
        :show-overflow-tooltip="true"
        align="center"
        min-width="150px"
      >
        <template slot-scope="scope">
          <a :href="scope.row.doorHeadUrl">{{ scope.row.doorHeadUrl }}</a>
        </template>
      </el-table-column>
      <el-table-column
        label="厂房"
        :show-overflow-tooltip="true"
        align="center"
        min-width="150px"
      >
        <template slot-scope="scope">
          <a :href="scope.row.workshopUrl">{{ scope.row.workshopUrl }}</a>
        </template>
      </el-table-column>
      <el-table-column
        :label="$t('table.operation')"
        align="center"
        min-width="150px"
        class-name="small-padding fixed-width"
      >
        <template slot-scope="{ row }">
          <!-- <i
            v-hasPermission="['feedList:view']"
            class="el-icon-view table-operation"
            style="color: #87d068"
            @click="view(row)"
          /> -->
          <el-link
            v-hasPermission="['feedList:view']"
            class="el-icon-view"
            @click="view(row)"
          >
            查看详情
          </el-link>
          <el-link
            v-has-no-permission="['user:view', 'user:update', 'user:delete']"
            class="no-perm"
          >
            {{ $t("tips.noPermission") }}
          </el-link>
        </template>
      </el-table-column>
    </el-table>
    <pagination
      v-show="total > 0"
      :total="total"
      :page.sync="pagination.pageNum"
      :limit.sync="pagination.pageSize"
      @pagination="search"
    />

  </div>
</template>

<script>
import Pagination from '@/components/Pagination'
export default {
  components: {
    Pagination
  },
  data() {
    return {
      total: 0,
      dialogVisible: true,
      pagination: {
        pageSize: 10,
        pageNum: 1
      },
      searchForm: {
        startTime: '',
        endTime: '',
        userId: '',
        repairName: null
      },
      loading: false,
      tableKey: 0,
      list: [],
      dateTime: ''
    }
  },
  created() {
    this.search()
  },
  methods: {
    search(e) {
      this.loading = true
      if (e && e.page) {
        this.pagination.pageSize = e.limit
        this.pagination.pageNum = e.page
      }
      if (this.dateTime) {
        this.searchForm.startTime = this.dateTime[0]
        this.searchForm.endTime = this.dateTime[1]
      }
      this.$post(
        '/web/recruitSales/getList',
        {
          queryRequest: {
            ...this.pagination
          }, // 分页参数
          entity: {
            ...this.searchForm
          }
        },
        'json'
      )
        .then((res) => {
          this.loading = false
          if (res.data.code === '0') {
            this.list = res.data.data.rows
            this.total = res.data.data.total
          }
        })
        .catch(() => {
          this.loading = false
        })
    },
    sortChange() {},
    reset() {
      this.dateTime = ''
      this.searchForm = {}
      this.search()
    },
    view(row) {
      console.log(row)
      this.$router.push({
        name: 'recruitDetail',
        query: {
          id: row.recruitSalesId
        }
      })
    },
    out() {
      this.$download('web/recruitSales/exportData', {
        ...this.searchForm
      }, `${new Date().getTime()}.xlsx`)
    }
  }
}
</script>

<style lang="scss" scoped>
.content {
  height: 800px;
  position: relative;
  width: 450px;
  overflow: hidden;
  overflow-y: auto;
  .header {
    font-family: PingFang SC, PingFang SC-Medium;
    height: 120px;
    box-sizing: border-box;
    padding: 28px 29px;
    border-bottom: 10px solid #f4f7fa;
    .title,
    .createTime {
      height: 30px;
      line-height: 30px;
      font-size: 16px;
      font-weight: 500;
      color: #323232;
    }
    label {
      width: 200px;
      display: inline-block;
      font-size: 16px;
      font-weight: 500;
      text-align: left;
      color: #919598;
    }
  }
  .top {
    height: 80px;
    padding: 0 12px;
    line-height: 80px;
    .tips {
      width: 5px;
      height: 26px;
      opacity: 1;
      display: inline-block;
      margin-right: 13px;
      border: 3px solid #f4b22d;
      background: #f4b22d;
      border-radius: 6px;
    }
    font-size: 16px;
    font-weight: 700;
    text-align: left;
    color: #323232;
  }
  .item {
    // height: 88px;
    // line-height: 44px;
    padding: 20px 31px;
    border-bottom: 1px solid #f1f1f1;
    display: flex;
    font-size: 16px;
    justify-content: space-between;
    .left {
      color: #919598;
    }
    .right {
      color: #323232;
    }
  }
  .myContent {
    .item {
      height: 44px;
      line-height: 1px;
      padding: 20px 31px;
      border-bottom: 1px solid #f1f1f1;
      display: flex;
      font-size: 16px;
      justify-content: space-between;
      .left {
        color: #919598;
      }
      .right {
        color: #323232;
      }
    }
  }

  button {
    margin-right: 10px;
    font-size: 16px;
    width: 80px;
    height: 40px;
    opacity: 0.6;
    background: #f1f1f1;
    margin-bottom: 10px;
    border-radius: 6px;
    cursor: pointer;
    border: none;
    &.activeColor {
      opacity: 1;
      background: #f4b22d;
      border-radius: 6px;
    }
  }
  .contentDefault {
    height: 392px;
    // width: 100vw;
    padding: 30px;
    display: flex;
    justify-content: flex-start;
    flex-wrap: wrap;
  }
}
</style>
